<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cart {
            background-color: aqua;
            width: 200px;
            display: inline;

        }

        #cartList {

            border: 1px solid black;
            width: 200px;
            /* display: none; */

        }

        .none {
            display: none;
        }

        .cartOver {
            background-color: red;
            z-index: 100;
            border-bottom: none;

        }

        .cartListOver {
            display: block;
            position: relative;
            top: -1px;
        }

        .cartOut {
            background-color: #f9f9f9;
            border-bottom: solid 1px #dcdcdc;
        }

        .cartListOut {
            display: none;
        }
    </style>
</head>

<body>
    <div id="cart" onmouseover="over()" onmouseout="out()">购物车</div>
    <ul id="cartList" class="none">
        <li>商品1</li>
        <li>商品2</li>
        <li>商品3</li>
    </ul>
    <script>
        function over() {
            // document.getElementById("cart").style.backgroundColor = "red";
            // document.getElementById("cart").style.zIndex = "100";
            // document.getElementById("cart").style.borderBottom = "none";
            // document.getElementById("cartList").style.display = "block";
            // document.getElementById("cartList").style.position = "relative";
            // document.getElementById("cartList").style.top = "-1px";
            document.getElementById("cart").className = 'cartOver'
            document.getElementById("cartList").className = 'cartListOver'
            console.log(document.defaultView.getComputedStyle(document.getElementById("cart"), null).alignItems);
            console.log(document.getElementById("cart").style.display);
        }

        function out() {
            // document.getElementById("cart").style.backgroundColor = "#f9f9f9";
            // document.getElementById("cart").style.borderBottom = "solid 1px #dcdcdc";
            // document.getElementById("cartList").style.display = "none";
            document.getElementById("cart").className = 'cartOut'
            document.getElementById("cartList").className = 'cartListOut'
        }
    </script>
</body>

</html>